<template>
  <div class="reportcharts">
    <h2>{{title}}周客流高低峰分时</h2>
    <el-radio-group v-show="isShowKpis" class="kpiRadio" v-model="kpiType" size="small" @change="kpiTypeChange">
      <el-radio-button v-for="item in kpislist"
                       :key="item.id" :label="item.key">{{item.name}}</el-radio-button>
    </el-radio-group>
    <div class="echardiv">
      <div class="repHeatmap" id="heatmap"></div>
    </div>
  </div>

</template>

<script>
  let echarts = require("echarts");

  export default {
    props:{
      HeatMapData:{},
      kpislist:{
        default:[]
      },
      KPIType:'',
      title:''
    },
    data() {
      return {
        option : {
          title:{
            text:'',
            left:'center',
            textStyle:{
              color:'#ccc',
              fontSize:16,
            }
          },
          tooltip: {
            position: 'top'
          },
          animation: false,
          grid: {
            height: '50%',
            y: '10%'
          },
          xAxis:[
            {
              type: 'category',
              data:'',
              splitArea: {
                show: true
              }
            },
            {
              type: 'category',
              name:'时合计',
              data: '',
              position: 'bottom',
              offset: 30,
              splitArea: {
                show: true
              }
            }
          ],
          yAxis:[
            {
              type: 'category',
              data: '',
              splitArea: {
                show: true
              }
            },
            {
              type: 'category',
              name:'日合计' ,
              position: 'right',
              offset: 10,
              splitArea: {
                show: true
              }
            }
          ],
          visualMap: {
            min: '',
            max: '',
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%',
            color: ['#bf444c', '#d88273', '#f6efa6']
          },
          series:{
            name: '',
            type: 'heatmap',
            data: '',
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        },
        kpiType:'',
        defaultOtion:{
           title:{
            show:true,
            text:"暂 无 数 据",
            textAlign:'center',
            left:'48%',
            top:'45%',
            textStyle:{
              fontSize:16,
              color:'#b4b6bd',
            }
          },
          grid: {
            x: 40,
            x2: "8%",
          },
          backgroundColor:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#f5f8fe' // 0% 处的颜色
                }
                ],
                global: false // 缺省为 false        
          },
          tooltip: {
            position: 'top'
          },

        },
        isShowKpis:true,
      }
    },
    mounted(){
      setTimeout(() => {
        window.onresize = () => {
          this.loadEchartResize("");
        };
      }, 200);
      //点击收缩按钮
      this.$Bus.$on("ArrowClick", w => {
        this.loadEchartResize(w);
      });
      this.myChart = echarts.init(document.getElementById('heatmap'));
     
    },
    beforeDestroy(){
      window.onresize=null;
      this.$Bus.$off('ArrowClick');
    },
    watch:{
      KPIType(val){
        this.kpiType = val;
      }
    },
    methods:{
      setOption(val){
        if(val==false){
          this.myChart.setOption(this.defaultOtion,true);
          this.isShowKpis = false
          return
        }
        this.isShowKpis = true
        this.$Bus.$emit('Loading',true);
        this.option.visualMap.max = val.max
        this.option.visualMap.min = val.min
        this.option.visualMap.range = [val.min,val.max]
        this.option.xAxis[0].data = val.x_data
        this.option.xAxis[1].data = val.hourTotal;//时合计
        this.option.yAxis[0].data = val.y_data
        this.option.yAxis[1].data = val.dayTotal//日合计
        this.option.series.data = val.data
        this.option.series.name = val.kpiName
        this.option.title.text = val.title 
        this.$nextTick(()=>{
          this.myChart.setOption(this.option,true);
           this.$Bus.$emit('Loading',false);
        })

      },
      loadEchartResize(w) {
        let opts;
        if (this.isEmpty(w)) opts = { width: w+100 };
        else {
          let con_w = $(".con").width() - 110;
          opts = { width: con_w };
        }
        this.myChart.resize(opts);
      },
      isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
          return false;
        } else {
          return true;
        }
      },
      //指标chenge事件
      kpiTypeChange(val){
        this.$emit('kpiTypeChange',val)
      }
    }
  }
</script>

<style scoped lang="scss">  
  .reportcharts{
    width: 100%;
    height: 520px;
    background: #fff;
    padding: 35px 10px 20px 35px;
    overflow: hidden;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
      display: inline-block;
      margin-right: 20px;
    }
    .kpiRadio{
      display: inline-block;
    }
    .echardiv{
      width: 100%;
      height: 440px;
      margin-top: 20px;
      .repHeatmap {
        width: 100%;
        height: 440px;
      }
    }

  }

</style>